<template>
	<view class="scrollPage">
			<u-navbar :border-bottom="false" title="积分提现" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group margin-top">
					<view class="title">信息表单</view>
					<radio :class="radio=='0'?'checked':''" :checked="radio=='0'?true:false" value="0"></radio>
				</view>
				<view class="cu-card" v-if="radio==0">
					<view class="cu-item bg-img shadow-blur" >
						<view class="cardTitle">
							<view class="cu-form-group">
								<view class="title">信息A</view>
								<input placeholder="请输入" name="input" v-model="realName"></input>
							</view>
							<view class="cu-form-group">
								<view class="title">信息B</view>
								<input placeholder="请输入" name="input" v-model="bankName"></input>
							</view>
							<view class="cu-form-group">
								<view class="title">信息C</view>
								<input placeholder="请输入" name="input" v-model="cardNum"></input>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="cu-form-group margin-top">
					<view class="title">zfb</view>
					<radio :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></radio>
				</view>
				<view class="cu-card" v-if="radio==1">
					<view class="cu-item bg-img shadow-blur" >
						<view class="cardTitle">
							<view class="cu-form-group">
								<view class="title">账号</view>
								<input placeholder="请输入zfb账号" name="input" v-model="alipayNum"></input>
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="cu-form-group margin-top">
					<view class="title">wx号</view>
					<radio :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false" value="2"></radio>
				</view>
				<view class="cu-card" v-if="radio==2">
					<view class="cu-item bg-img shadow-blur" >
						<view class="cardTitle">
							<view class="cu-form-group">
								<view class="title">账号</view>
								<input placeholder="请输入wx账号" name="input" v-model="wxNum"></input>
							</view>
						</view>
					</view>
				</view> -->
			</radio-group>
			<view class="padding flex flex-direction">
				<view class="cu-form-group">
					<view class="title">提现积分</view>
					<input placeholder="请输入提取积分数量" name="input" type="number" v-model="money"></input>
				</view>
				<view style="margin: 20rpx;">
					<text>提示：提现积分不低于200积分，填写信息前请看“新闻中心-提现注意”或者“消息-系统消息”。</text>
				</view>
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="getMember()">申请提现</button>
			</view>
	</view>	
	
</template>

<script>
var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				radio:'0',
				realName:'',
				bankName:'',
				cardNum:'',
				alipayNum:'',
				wxNum:'',
				money:'',
				integralCount:''
	        }
	    },
		onLoad() {
			_self = this;
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			RadioChange(e) {
				this.radio = e.detail.value
			},
			getMember : function(){
				if(this.radio==0){
					if(this.realName==''){
						uni.showToast({
							icon:"none",
							title:'请输入'
						})
						return;
					}
					if(this.bankName==''){
						uni.showToast({
							icon:"none",
							title:'请输入'
						})
						return;
					}
					if(this.cardNum==''){
						uni.showToast({
							icon:"none",
							title:'请输入'
						})
						return; 
					}
				}else if(this.radio==1){
					if(this.alipayNum==''){
						uni.showToast({
							icon:"none",
							title:'请输入'
						})
						return;
					}
				}else if(this.radio==2){
					if(this.wxNum==''){
						uni.showToast({
							icon:"none",
							title:'请输入'
						})
						return;
					}
				}
				if(this.money==''){
					uni.showToast({
						icon:"none",
						title:'提现积分不能为空，请输入'
					})
					return;
				}
				if(this.money==''||this.money<200){
					uni.showToast({
						icon:"none",
						title:'提现积分不能低于200积分'
					})
					return;
				}
			    uni.request({
			    	url: this.serverUrl + 'app/getMember',
			    	header: {
			    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			    	},
			    	method: 'POST',
			    	data: {
						id: this.userInfo.id,
			    	},
			    	success: (r) => {
			    		if (r.data.code==0) {
							this.integralCount=r.data.data.integralCount;
							if(this.integralCount<200){
								uni.showToast({
									icon:"none",
									title:'账户积分为'+this.integralCount+'，不可提现'
								})
								return;
							}
							if(this.integralCount<this.money){
								uni.showToast({
									icon:"none",
									title:'账户积分为'+this.integralCount+'，提现金额不可以超出账户积分'
								})
								return;
							}
							this.applyCash();
						}
					}
				})
			},
	        applyCash(){
				uni.request({
					url: this.serverUrl + 'app/applyCash',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						realName: this.realName,
						bankName: this.bankName,
						cardNum: this.cardNum,
						alipayNum: this.alipayNum,
						wxNum: this.wxNum,
						money: this.money,
						type: this.radio,
						memberId: this.userInfo.id,
					},
					success: (r) => {
						// console.log(r);
						if (r.data.code==1) {
							uni.showModal({
								title:'申请提现成功',
								content:'通过后将会短信通知您',
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
									    uni.redirectTo({
									    	url:'/pageB/component/usercenter'
									    })
									 } 
								}
							})
						}
					}
				})
				
				
			}
		}
	}	
</script>

<style>
	.cu-item{
		background-color: #4079e0 !important;
	}
	.cardTitle {
		color: #000;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		/* transform: skew(-10deg, 0deg); */
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	
	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}
	
	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}
</style>
